<template>
  <div class="h-full w-full pt-5">
    <Row :gutter="20" class="h-full w-full">
      <Col :span="18" style="height: 100%">
        <div class="custom-card calcHeight card-container">
          <div class="title">
            <div class="word">访问统计</div>
          </div>
          <div class="count-box marginBottom30">
            <Row style="height: 100%">
              <Col :span="8" class="custom-col afterLine">
                <div class="number-box">
                  <div class="number">{{ onlineUserNum }}</div>
                  <div class="remark">当前在线用户</div>
                </div>
              </Col>
              <Col :span="8" class="custom-col afterLine">
                <div class="number-box afterLine">
                  <div class="number">{{ todayVisitUserNum }}</div>
                  <div class="remark">今日访问人数</div>
                </div>
              </Col>
              <Col :span="8" class="custom-col afterLine">
                <div class="number-box">
                  <div class="number">{{ todayVisitNum }}</div>
                  <div class="remark">今日访问次数</div>
                </div>
              </Col>
            </Row>
          </div>
          <div class="chart-wrapper">
            <div class="button-list">
              <div
                :class="[
                  'custom-button',
                  { active: accessStatisticsType === 1 },
                ]"
                @click="handleClickToggle2(1)"
              >
                近7天
              </div>
              <div
                :class="[
                  'custom-button',
                  { active: accessStatisticsType === 2 },
                ]"
                @click="handleClickToggle2(2)"
              >
                近30天
              </div>
              <div
                :class="[
                  'custom-button',
                  { active: accessStatisticsType === 3 },
                ]"
                @click="handleClickToggle2(3)"
              >
                近1年
              </div>
            </div>
            <data-monitoring-chart ref="dataMonitoringChartRef" />
          </div>
        </div>
        <div class="custom-card marginTop24 card-container">
          <div class="title">
            <div class="word">限制统计</div>
            <div class="left-button-list">
              <div
                :class="[
                  'custom-button',
                  { active: restrictionStatistics === 1 },
                ]"
                @click="handleClickToggle1(1)"
              >
                今日
              </div>
              <div
                :class="[
                  'custom-button',
                  { active: restrictionStatistics === 2 },
                ]"
                @click="handleClickToggle1(2)"
              >
                本周
              </div>
              <div
                :class="[
                  'custom-button',
                  { active: restrictionStatistics === 3 },
                ]"
                @click="handleClickToggle1(3)"
              >
                本月
              </div>
              <div
                :class="[
                  'custom-button',
                  { active: restrictionStatistics === 4 },
                ]"
                @click="handleClickToggle1(4)"
              >
                本年
              </div>
            </div>
          </div>
          <div class="count-box height208">
            <Row style="height: 100%">
              <Col :span="8">
                <div class="content afterLine">
                  <div class="top">
                    <div class="left">
                      <div class="number">
                        {{ restrictionStatisticsData.newAddedNumber }}
                      </div>
                      <div class="remark">
                        {{ restrictionStatisticsName }}新增
                      </div>
                    </div>
                    <div class="right">
                      <div class="remark" style="text-align: right">环比</div>
                      <div class="number font-size-22">
                        <i
                          class="el-icon-caret-top"
                          v-if="restrictionStatisticsData.newAddedChainRate > 0"
                          style="color: #5eedff"
                        ></i>
                        <i
                          class="el-icon-caret-bottom"
                          v-else
                          style="color: #ff417a"
                        ></i>
                        {{ restrictionStatisticsData.newAddedChainRate }}
                      </div>
                    </div>
                  </div>
                  <div class="bottom">
                    <div class="left">
                      <div class="number">
                        {{ restrictionStatisticsData.sumNum }}
                      </div>
                      <div class="remark">限制总数</div>
                    </div>
                  </div>
                </div>
              </Col>
              <Col :span="8">
                <div class="content afterLine">
                  <div class="top">
                    <div class="left">
                      <div class="number">
                        {{ restrictionStatisticsData.newVisitWhiteNumber }}
                      </div>
                      <div class="remark">白名单新增</div>
                    </div>
                  </div>
                  <div class="bottom">
                    <div class="left">
                      <div class="number">
                        {{
                          (
                            restrictionStatisticsData.visitWhiteRate * 100
                          ).toFixed(2)
                        }}%
                      </div>
                      <div class="remark">白名单占比率</div>
                    </div>
                  </div>
                </div>
              </Col>
              <Col :span="8">
                <div class="content">
                  <div class="top">
                    <div class="left">
                      <div class="number">
                        {{ restrictionStatisticsData.newVisitBlackNumber }}
                      </div>
                      <div class="remark">黑名单新增</div>
                    </div>
                    <div class="right">
                      <div class="remark" style="text-align: right">环比</div>
                      <div class="number font-size-22">
                        <i
                          class="el-icon-caret-top"
                          v-if="
                            restrictionStatisticsData.newVisitBlackChainRate > 0
                          "
                          style="color: #5eedff"
                        ></i>
                        <i
                          class="el-icon-caret-bottom"
                          v-else
                          style="color: #ff417a"
                        ></i>
                        {{ restrictionStatisticsData.newVisitBlackChainRate }}
                      </div>
                    </div>
                  </div>
                  <div class="bottom">
                    <div class="left">
                      <div class="number">
                        {{
                          (
                            restrictionStatisticsData.visitBlackRate * 100
                          ).toFixed(2)
                        }}%
                      </div>
                      <div class="remark">黑名单占比率</div>
                    </div>
                  </div>
                </div>
              </Col>
            </Row>
          </div>
        </div>
      </Col>
      <Col :span="6" style="height: 100%; overflow: hidden">
        <div class="custom-card card-container" style="height: 100%">
          <div class="title">
            <div class="word">基本信息</div>
          </div>
          <div class="basic-info">
            <div class="item">
              <div class="label">设备名称</div>
              <div class="content">{{ computerName }}</div>
            </div>
            <div class="item">
              <div class="label">设备型号</div>
              <div class="content">{{ osArch }}</div>
            </div>
            <div class="item">
              <div class="label">设备位置</div>
              <div class="content">{{ computerIp }}</div>
            </div>
            <div class="item">
              <div class="label">健康状态</div>
              <div class="content">{{ health === '0' ? '正常' : '异常' }}</div>
            </div>
          </div>
          <div class="percentage-box margin-bottom-100">
            <div class="top flex-space-between">
              <div class="left font-size-16">CPU</div>
              <div class="right font-size-32">{{ cpuUsed }}%</div>
            </div>
            <div class="percentage">
              <div class="content">
                <div class="cube red" v-for="index in 20" :key="index"></div>
              </div>
              <div class="mask" :style="{ width: 100 - cpuUsed + '%' }"></div>
            </div>
          </div>
          <div class="percentage-box margin-bottom-100">
            <div class="top flex-space-between">
              <div class="left font-size-16">磁盘状态</div>
              <div class="right font-size-32">{{ diskUsage }}%</div>
            </div>
            <div class="percentage margin-bottom-24">
              <div class="content">
                <div class="cube blue" v-for="index in 20" :key="index"></div>
              </div>
              <div class="mask" :style="{ width: 100 - diskUsage + '%' }"></div>
            </div>
            <div class="bottom flex-space-between">
              <div class="left flex-space-between">
                <div class="remark font-size-14 margin-right-42">可用</div>
                <div class="number font-size-14">{{ diskFree }}G</div>
              </div>
              <div class="right flex-space-between">
                <div class="remark font-size-14 margin-right-42">已使用</div>
                <div class="number font-size-14">{{ diskUsed }}G</div>
              </div>
            </div>
          </div>
          <div class="percentage-box">
            <div class="top flex-space-between">
              <div class="left font-size-14">内存</div>
              <div class="right font-size-32">{{ memUsage }}%</div>
            </div>
            <div class="percentage margin-bottom-24">
              <div class="content">
                <div class="cube yellow" v-for="index in 20" :key="index"></div>
              </div>
              <div
                class="mask color2"
                :style="{ width: 100 - memUsage + '%' }"
              ></div>
            </div>
            <div class="bottom flex-space-between">
              <div class="left flex-space-between">
                <div class="remark font-size-14 margin-right-42">可用</div>
                <div class="number font-size-14">{{ memFree }}G</div>
              </div>
              <div class="right flex-space-between">
                <div class="remark font-size-14 margin-right-42">已使用</div>
                <div class="number font-size-14">{{ memUsed }}G</div>
              </div>
            </div>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>
<script setup lang="tsx">
import { computed, onMounted, reactive, ref } from 'vue';
import { Col, Row } from 'ant-design-vue';
import moment from 'moment';
import {
  getLimitReport,
  getServerBaseInfo,
  getTodayOnlineCount,
  getVisitReport,
} from '@/api/monitor';
import DataMonitoringChart from './dataMonitoringChart.vue';

// 定义响应式数据
const accessStatisticsType = ref(1);
const restrictionStatistics = ref(1);
const visitMonitorStatisticsData = ref([]);
const restrictionStatisticsData = reactive({
  newAddedChainRate: 0, // 新增环比
  newAddedNumber: 0, // 新增数量
  newVisitBlackChainRate: 0, // 黑名单新增环比
  newVisitBlackNumber: 0, // 黑名单新增
  newVisitWhiteChainRate: 0, // 白名单新增环比
  newVisitWhiteNumber: 0, // 白名单新增
  sumNum: 0, // 限制总数
  visitBlackRate: 0, // 黑名单占有比率
  visitWhiteRate: 0, // 白名单占有比率
});
const onlineUserNum = ref(0); // 在线人数
const todayVisitNum = ref(0); // 今日访问次数
const todayVisitUserNum = ref(0); // 今日访问人数
const computerIp = ref(''); // 设备位置
const computerName = ref(''); // 设备名称
const osArch = ref(''); // 设备型号
const health = ref(''); // 健康状态
const cpuUsed = ref(0); // cpu使用100%比
const diskFree = ref(0); // 磁盘可用容量
const diskUsage = ref(0); // 磁盘使用率
const diskUsed = ref(0); // 磁盘已使用
const memFree = ref(0); // 内存可用容量
const memUsage = ref(0); // 内存使用率
const memUsed = ref(0); // 内存已使用

// 计算属性
const restrictionStatisticsName = computed(() => {
  switch (restrictionStatistics.value) {
    case 1:
      return '今日';
    case 2:
      return '本周';
    case 3:
      return '本月';
    case 4:
      return '本年';
    default:
      return '';
  }
});

const dataMonitoringChartRef = ref();
// 获取访问统计数据
const getVisitMonitorStatisticsData = async () => {
  const res = await getVisitReport(accessStatisticsType.value);
  if (res.code === 200) {
    const xAxisData = [];
    const visitUserNumData = [];
    const visitNumData = [];

    // 日期排序
    res.time
      .sort((a, b) => moment(a).unix() - moment(b).unix())
      .forEach((item) => {
        const findData = res.data.find((element) => element.time === item);
        if (findData) {
          xAxisData.push(findData.time);
          visitUserNumData.push(findData.visitUserNum);
          visitNumData.push(findData.visitNum);
        } else {
          xAxisData.push(item);
          visitUserNumData.push(0);
          visitNumData.push(0);
        }
      });

    // 调用子组件方法初始化图表
    dataMonitoringChartRef.value.initChart(
      xAxisData,
      visitUserNumData,
      visitNumData,
    );
  }
};

// 获取限制统计数据
const getRestrictionStatisticsData = async () => {
  const res = await getLimitReport(restrictionStatistics.value);
  if (res.code === 200) {
    Object.assign(restrictionStatisticsData, res.data);
  }
};

// 切换限制统计数据类型
const handleClickToggle1 = (type) => {
  restrictionStatistics.value = type;
  getRestrictionStatisticsData();
};

// 切换访问统计数据类型
const handleClickToggle2 = (type) => {
  accessStatisticsType.value = type;
  getVisitMonitorStatisticsData();
};

// 初始化数据
const initData = async () => {
  const res1 = await getTodayOnlineCount();
  if (res1.code === 200) {
    onlineUserNum.value = res1.data.onlineUserNum;
    todayVisitNum.value = res1.data.todayVisitNum;
    todayVisitUserNum.value = res1.data.todayVisitUserNum;
    computerIp.value = res1.data.computerIp;
    computerName.value = res1.data.computerName;
    osArch.value = res1.data.osArch;
    health.value = res1.data.health;
    cpuUsed.value = res1.data.cpuUsed;
    diskFree.value = res1.data.diskFree;
    diskUsage.value = res1.data.diskUsage;
    diskUsed.value = res1.data.diskUsed;
    memFree.value = res1.data.memFree;
    memUsage.value = res1.data.memUsage;
    memUsed.value = res1.data.memUsed;
  }

  const res2 = await getServerBaseInfo();
  if (res2.code === 200) {
    computerIp.value = res2.data.computerIp;
    computerName.value = res2.data.computerName;
    osArch.value = res2.data.osArch;
    health.value = res2.data.health;
    cpuUsed.value = res2.data.cpuUsed;
    diskFree.value = res2.data.diskFree;
    diskUsage.value = res2.data.diskUsage;
    diskUsed.value = res2.data.diskUsed;
    memFree.value = res2.data.memFree;
    memUsage.value = res2.data.memUsage;
    memUsed.value = res2.data.memUsed;
  }

  getVisitMonitorStatisticsData();
  getRestrictionStatisticsData();
};

// 组件挂载时初始化数据
onMounted(() => {
  initData();
});

// 子组件引用
const dataMonitoringChart = ref(null);
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
}
::v-deep .el-card {
  border: none;
}
.custom-card {
  padding: 24px;
  box-sizing: border-box;
  &.calcHeight {
    height: calc(100% - 337px);
  }
  .title {
    height: 24px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left-button-list {
      display: flex;
      .custom-button {
        margin-left: 18px;
        width: 52px;
        height: 22px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #ffffff;
        opacity: 0.4;
        line-height: 22px;
        color: #fff;
        font-size: 14px;
        text-align: center;
        padding: 0;
        cursor: pointer;
        &.active {
          opacity: 1;
        }
      }
    }
    .word {
      color: #fff;
      font-size: 16px;
    }
  }
  &.marginTop24 {
    margin-top: 24px;
  }
  .chart-wrapper {
    height: calc(100% - 150px);
    position: relative;
    .button-list {
      position: absolute;
      top: -10px;
      right: 0;
      z-index: 999;
      display: flex;
      .custom-button {
        margin-left: 18px;
        padding: 5px 10px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #ffffff;
        opacity: 0.4;
        color: #fff;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        &.active {
          opacity: 1;
        }
      }
    }
  }
  .count-box {
    height: 104px;
    background: rgba(0, 0, 0, 0.16);
    border-radius: 4px 4px 4px 4px;
    &.height208 {
      height: 227px;
    }
    &.marginBottom30 {
      margin-bottom: 30px;
    }
    .custom-col {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      &.afterLine {
        position: relative;
        &::after {
          position: absolute;
          top: 24px;
          right: 0;
          content: '';
          width: 1px;
          height: 56px;
          background: #ffffff;
          border-radius: 4px 4px 4px 4px;
          opacity: 0.18;
        }
      }
      &.afterLine:last-child {
        &::after {
          content: none;
        }
      }
      .number-box {
        .number {
          font-size: 30px;
          text-align: center;
          margin-bottom: 10px;
        }
        .remark {
          text-align: center;
          font-size: 14px;
          opacity: 0.8;
        }
      }
    }
    .content {
      padding: 5px 24px;
      box-sizing: border-box;

      &.afterLine {
        position: relative;
        &::after {
          position: absolute;
          top: 24px;
          right: 0;
          content: '';
          width: 1px;
          height: 160px;
          background: #ffffff;
          border-radius: 4px 4px 4px 4px;
          opacity: 0.18;
        }
      }

      .number {
        font-size: 30px;
        text-align: center;
        margin-bottom: 10px;
      }
      .remark {
        text-align: center;
        font-size: 14px;
        opacity: 0.8;
      }
      .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 36px;
      }
      .bottom {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .basic-info {
    padding-left: 12px;
    box-sizing: border-box;
    margin-top: 30px;
    margin-bottom: 40px;
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      .label {
        font-size: 14px;
        color: #fff;
        opacity: 0.8;
      }
      .content {
        font-size: 14px;
        color: #fff;
      }
    }
  }
  .percentage-box {
    .percentage {
      width: 100%;
      height: 12px;
      margin-top: 20px;
      border-radius: 0px 0px 0px 0px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      position: relative;
      .mask {
        position: absolute;
        top: 0;
        right: 0;
        height: 10px;
        width: 50%;
        background: #062139;
        &.color2 {
          background: #062139;
        }
      }
      .content {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 4px;
        box-sizing: border-box;
        .cube {
          width: 5%;
          height: 3px;
          margin-right: 4px;
          &:last-child {
            margin-right: 0;
          }
          &.red {
            background: #ff417a;
          }
          &.blue {
            background: #35e6ee;
          }
          &.yellow {
            background: #ee9135;
          }
        }
      }
    }
  }
}
::v-deep .el-card__body {
  padding-bottom: 0;
}
.flex-space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.font-size-16 {
  font-size: 16px;
  color: #fff;
}
.font-size-32 {
  font-size: 32px;
  color: #fff;
}
.font-size-14 {
  font-size: 14px;
  color: #fff;
}
.font-size-22 {
  margin-top: 6px;
  font-size: 22px !important;
  color: #fff;
}
.margin-right-42 {
  margin-right: 42px;
}
.margin-bottom-100 {
  margin-bottom: 50px;
}
.margin-bottom-24 {
  margin-bottom: 24px;
}
</style>
